<template>
  <!-- 最大盒子 -->
  <div class="container">
    <el-card>
      <!-- 导航栏-->
      <!-- <div>=<el-row> 、<span>等于<el-col> -->
      <el-row>
        <el-col :span="18">
          <!-- 搜索框 -->
          <el-col :span="12">
            <el-form
              :inline="true"
              ref="subjectFrom"
              :model="formInline"
              label-width="80px"
            >
              <!--  搜索框1-->
              <el-form-item label="关键字">
                <el-input
                  class="input-one"
                  v-model="formInline.keyword"
                  placeholder="根据文章标题搜索"
                ></el-input>
              </el-form-item>

              <!-- 搜索框2 -->
              <el-form-item label="状态">
                <el-select v-model="formInline.state" placeholder="请选择">
                  <el-option label="已启用" :value="1"></el-option>
                  <el-option label="已禁用" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>

          <el-col :span="11" class="left-one">
            <el-button size="small" class="input-button" @click="resetInput"
              >清除</el-button
            >
            <el-button
              size="small"
              class="input-button"
              type="primary"
              @click="searchfn"
              >搜索</el-button
            >
          </el-col>
        </el-col>
        <!-- 按钮 -->
        <el-col :span="6">
          <!-- addDialogVisible 添加对话框可见 -->
          <el-button
            class="input-right"
            size="mini"
            type="success"
            icon="el-icon-edit"
            @click="addDialogVisible = true"
            >新增技巧</el-button
          >
        </el-col>
      </el-row>

      <!-- 消息文案 -->
      <!-- closable  可关闭 -->
      <el-alert
        :title="`数据一共${counts} 条`"
        :closable="false"
        type="info"
        show-icon
      >
      </el-alert>

      <!-- 表格区域 -->
      <!-- tableData  表格文本 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column label="文章标题" width="440">
          <!-- 标题视频 -->
          <template slot-scope="scope">
            {{ scope.row.title }}
            <i
              @click="video(scope.row.videoURL)"
              v-if="scope.row.videoURL"
              class="fa fa-film"
              aria-hidden="true"
            ></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column prop="createTime" label="录入时间">
          <template slot-scope="scope">
              <span>{{ scope.row.addDate | formatTime }}</span>
            </template>
            </el-table-column>
        <el-table-column prop="state" label="状态">
          <!-- 是否启用 -->
          <template slot-scope="scope">
            {{ scope.row.state == 1 ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <!-- 四个按钮 -->
          <template slot-scope="scope">
            <el-button @click="previewRow(scope.row)" type="text" size="small"
              >预览
              </el-button
            >
            <el-button
              @click="disableRow(scope.row)"
              type="text"
              size="small"
              >{{ scope.row.state === 1 ? "禁用" : "启用" }}</el-button
            >
            <el-button
              :disabled="scope.row.state === 1"
              @click.native.prevent="modifyRow(scope.row)"
              type="text"
              size="small"
              >修改</el-button
            >
            <el-button
              :disabled="scope.row.state === 1"
              @click.native.prevent="deleteRow(scope.row)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <!--formInline  -->
      <pagination-add
        :page="formInline.page"
        :pagesize="formInline.pagesize"
        :counts="counts"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </el-card>

    <!-- 添加弹框 -->
    <!--  addDialogVisible  添加对话框可见 -->
    <!-- resetAdd  添加重置 -->
    <el-dialog
      title="添加文章"
      :visible.sync="addDialogVisible"
      width="40%"
      @close="resetAdd"
    >
      <!-- 表单区域 -->
      <!-- ruleForm  -->
      <el-form
        :model="editRuleForm"
        :rules="editRuleFormRules"
        ref="editRuleFormRef"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="文章标题" prop="title" class="elform">
          <el-input
            v-model="editRuleForm.title"
            placeholder="请输入文章标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章标题" prop="articleBody" class="elform">
          <quill-editor
            style="margin-left: 0px"
            v-model="editRuleForm.articleBody"
            ref="myQuillEditor"
          >
          </quill-editor>
        </el-form-item>
        <el-form-item label="视频地址" class="elform">
          <el-input
            v-model="editRuleForm.videoURL"
            placeholder="请输入视频地址"
          ></el-input>
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addArticlesFrom">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改弹框 -->
    <el-dialog
      title="修改文章"
      :visible.sync="editVisible"
      @close="resetAddArt"
      width="40%"
    >
      <!-- 表单区域 -->
      <!-- ruleForm  -->
      <el-form
        :model="changeFormRules"
        :rules="editRuleFormRules"
        ref="changeFormRulesRef"
        label-width="80px"
        class="demo-ruleForm"
      >

        <el-form-item label="文章标题" prop="title" class="elform">
          <el-input
            v-model="changeFormRules.title"
            placeholder="请输入文章标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章标题" prop="articleBody" class="elform">
          <quill-editor
            style="margin-left: 0px"
            v-model="changeFormRules.articleBody"
            ref="myQuillEditor"
          >
          </quill-editor>
        </el-form-item>
        <el-form-item label="视频地址" class="elform">
          <el-input
            v-model="changeFormRules.videoURL"
            placeholder="请输入视频地址"
          ></el-input>
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button @click="editVisible = false">取消</el-button>
          <el-button type="primary" @click="editArticlesFrom">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 预览框  -->
    <el-dialog title="预览文章" :visible.sync="editPreview" width="43%">

      <!-- 主体区域 -->
      <div class="preview-box">
        <div class="preview-title">{{ articlesInfo.title }}</div>
        <div class="preview-nav">

          <span>{{ articlesInfo.sformatTime | formatTime  }}</span>
          <span>{{ articlesInfo.username }}</span>
          <span class="el-icon"></span>
          <span>{{ articlesInfo.visits }}</span>
        </div>
        <div class="preview-content" v-html="articlesInfo.articleBody" style="width:100%"></div>
      </div>
    </el-dialog>

    <!-- 视频区域 -->
    <!-- autoplay  播放 -->
    <!-- closeVideo 图标显示 -->
    <div class="video" v-if="videoUrl">
      <div class="video-one" @click="closeVideo()">
        <span class="el-icon-close"></span>
      </div>
      <div class="video-two">
        <video autoplay :src="videoUrl"></video>
      </div>
    </div>
  </div>
</template>

<script>
// 时间
import dayjs from 'dayjs'
// 接口
import { list, changeState, add, remove, update } from '@/api/hmmm/articles.js'
// 分页
import PaginationAdd from '../components/Pagination/pagination-add.vue'
// 文本框
import 'quill/dist/quill.snow.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor,
    PaginationAdd
  },
  data () {
    return {
      // 预览文章显示
      editPreview: false,

      // 修改弹窗显示
      editVisible: false,

      // 新增弹窗
      addDialogVisible: false,

      // 修改表单的数据
      changeFormRules: {
        title: '',
        articleBody: '',
        videoURL: null,
        id: ''
      },

      // 添加框数据
      editRuleForm: {
        title: '',
        articleBody: '',
        videoURL: null
      },

      // 预览数据
      articlesInfo: [],

      // 添加验证
      editRuleFormRules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 18, message: '长度在3到18个字符', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      },

      // 视频路径
      videoUrl: null,
      // 条数
      counts: 0,
      // 面试数据
      tableData: [],
      // 请求数据参数
      formInline: {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: null
      }
    }
  },

  // 初始化
  created () {
    // 调用渲染列表的方法
    this.getArticleList()
  },

  methods: {

    //  添加确定
    async addArticlesFrom () {
      await add(this.editRuleForm)
      this.$message.success('添加成功！')
      this.addDialogVisible = false
      this.getArticleList()
    },

    // 修改确定
    async editArticlesFrom () {
      await update(this.changeFormRules)
      this.$message.success('修改成功！')
      this.editVisible = false
      this.getArticleList()
    },

    // 点击预览
    previewRow (row) {
      this.articlesInfo = row
      this.editPreview = true
    },

    // 点击修改弹窗显示
    modifyRow (row) {
      this.changeFormRules.title = row.title
      this.changeFormRules.articleBody = row.articleBody
      this.changeFormRules.videoURL = row.videoURL
      this.changeFormRules.id = row.id
      this.editVisible = true
    },

    // 点击搜索
    async searchfn () {
      const res = await list({ keyword: this.formInline.keyword, state: this.formInline.state })
      this.tableData = res.data.items
      this.counts = res.data.counts
    },

    // 重置添加表单
    resetAdd () {
      this.$refs.editRuleFormRef.resetFields()
      this.editRuleForm.articleBody = ''
      this.editRuleForm.videoURL = ''
    },

    // 点击删除
    async deleteRow (row) {
      // alert(row.id)
      const configRuselt = await this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (configRuselt !== 'confirm') {
        return this.$message('您取消了删除操作!')
      }
      if (this.tableData.length === 1) {
        this.formInline.page--
        if (this.formInline.page <= 1) {
          this.formInline.page = 1
        }
      }
      const res = await remove(row)
      this.$message.success(res.message)

      this.getArticleList()
    },

    // 清除按钮
    resetInput () {
      this.formInline = {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: null
      }
      this.getArticleList()
    },

    // 图标显示
    closeVideo () {
      this.videoUrl = null
    },

    // 视频关闭
    video (row) {
      this.videoUrl = row
    },

    // 切换状态
    async disableRow (row) {
      await changeState({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      row.state = row.state === 1 ? 0 : 1
    },

    // 修改重置
    resetAddArt () {
      this.$refs.changeFormRulesRef.resetFields()
    },

    // 获取文章列表
    async getArticleList () {
      const res = await list(this.formInline)
      this.tableData = res.data.items
      this.counts = res.data.counts
    },

    // 一页数量
    handleSizeChange (newSize) {
      this.formInline.pagesize = newSize
      this.getArticleList()
    },

    // 多少页
    handleCurrentChange (newPage) {
      this.formInline.page = newPage
      this.getArticleList()
    }

  },

  filters: {

    // 格式化时间的方法
    formatTime (time) {
      // dayjs 方法接收需要格式化的时间
      // format 方法是指按照那种格式对时间进行格式化
      return dayjs(time).format('YYYY-MM-DD hh:mm:ss')
    }
  }
}
</script>

<style scoped lang='scss'>
.left-one {
  margin-left: 9px;
}
.input-one {
  width: 200px;
}
.input-button {
  height: 35px;
}
.input-right {
  float: right;
  height: 35px;
  margin-left: 10px;
}

.elform {
  width: 100%;
}
// 预览
.preview-box {
  .preview-title {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .preview-nav {
    span {
      margin-right: 10px;
    }
  }
  .preview-content {
    margin-top: 10px;
    padding: 10px;
    background-color: #f5f5f5;
    border-top: 1px dashed #ccc;
  }
}

// 富文本
::v-deep .ql-container {
  height: 200px;
}

// 视频
.video {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
  .video-one {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, 0);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
  }
  .video-two {
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    video {
      width: 100%;
      height: 100%;
    }
  }
}

.el-form-item__content {
  margin-left: 10px;
}

.fa-film:before {
  color: #0245a8;
}
::v-deep.preview-content img{
 width: 100%;
}
::v-deep.el-table th {
  background-color: #fafafa;
}
::v-deep.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8
}
</style>
